
<template>



  <div class="card" style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="170" />
      <el-table-column prop="name" label="课程名称" width="170" />
      <el-table-column prop="no" label="课程编号" width="170" />
      <el-table-column prop="stuName" label="学生" width="170" />
<!--      <el-table-column prop="course_id" label="课程id" width="170" />-->
<!--      <el-table-column prop="student_id" label="学生id" width="170" />-->
      <el-table-column prop="teacher" label="任课老师 " width="170" />
      <el-table-column label="操作" width="170">
<!--        #默认值=“范围”scope表单.row行信息-->
        <template #default="scope">
          <el-button type="success" v-if="data.user.data[0].role==='Root'" @click="addGrade(scope.row)" >打分</el-button>
        </template>
      </el-table-column>
      <!--      <el-table-column必须加width不然会报错-->

    </el-table>
  </div>
  <div class="card" style="margin-bottom: 10px">
    <!--绑定分页插件,点击分页事件-->
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />
  </div>
  <el-dialog width="35%" v-model="data.formVisible" title="成绩信息">
    <el-form :model="data.form" label-width="100px" label-position="right" style="padding-right: 30px">
      <el-form-item label="课程名称" >
        <el-input disabled v-model="data.gradeForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生分数" >
        <el-input  v-model="data.gradeForm.score" placeholder="请输入学生分数" autocomplete="off" />
      </el-form-item>
      <el-form-item label="老师评语" >
        <el-input v-model="data.gradeForm.comment"  :rows="2" type="textarea" placeholder="请输入老师评语" autocomplete="off"/>
      </el-form-item>


    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">
          保 存
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script  setup>


import {reactive} from "vue";
import {  Search } from '@element-plus/icons-vue'
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";

const data =reactive({
  name:'',
  descr:'',
  teacher:'',
  id:'',
  tableData:[],
  total: 0,
  pageSize: 10,
  pageNum: 1,
  user: JSON.parse(localStorage.getItem('student-user')||'{}'),
  gradeForm:{},
  formVisible:false

})

const load = () =>{
  request.get('/Course/selectPageAll',{
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      name:data.name,
      descr:data.descr,
      student_id:data.id,

      // private Integer id;
      // private String name;
      // private String no;
      // private Integer student_id;
      // private Integer course_id;
      // private String teacher;

    }
  }).then(res=>{
    console.log(res.data.data.total)
    data.tableData=res.data.data?.list ||[]
    data.total=res.data.data.total || 0

  })


}

load()
const handelCurrentChange =(pageNum)=>{
  //当翻页当时候从新加载数据
  load()

}



//自定义data


const addGrade=(row)=>{
  data.formVisible=true
  //打开弹窗
  data.gradeForm.name=row.name
  data.gradeForm.course_id=row.course_id
  data.gradeForm.student_id=row.student_id
  data.gradeForm.feedback='暂无评价'
  data.gradeForm.stuName=row.stuName
  data.gradeForm.name=row.name


}

const save = () =>{
  request.post('/grade/add',data.gradeForm).then(res=>{
    if (res.data.code===1){
      load()
      data.formVisible=false  //关闭弹窗
      data.gradeForm= {}

      ElMessage.success( "操作成功")


    }else {
      console.log(res)
      ElMessage .error("课程已评分")
    }



  })
}





</script>






<style scoped>

</style>

